<template>
    <div class="orderDetele pageWrapper">
        <Loading :loading="loading">
            <Form :ref="formRef" :label-width="150" :model="formData" inline>
              <Card :bordered="true">
                <p slot="title">订单信息</p>
                <FormItem label="主订单号：" style="width:30%">
                  <div>{{ formData.orderId }}</div>
                </FormItem>
                <FormItem label="源主订单号：" style="width:30%">
                  <div class="orderList" @click="bandleOrderList(formData.originalOrderId)">{{ formData.originalOrderId }}</div>
                </FormItem>
                <FormItem label="支付订单号：" style="width:30%">
                  <div>{{ formData.paymentId }}</div>
                </FormItem>
                <FormItem label="渠道支付订单号：" style="width:30%">
                  <div>{{ formData.flowId }}</div>
                </FormItem>

                <FormItem label="商户名称：" style="width:30%">
                  <div>{{ formData.merchantName }}</div>
                </FormItem>

                <FormItem label="商户编码：" style="width:30%">
                  <div>{{ formData.merchantCode }}</div>
                </FormItem>
                <FormItem label="支付渠道用户标识：" style="width:30%">
                  <div>{{ formData.openid }}</div>
                </FormItem>

                <FormItem label="业务场景：" style="width:30%">
                  <div>{{ formData.orderSourceCn }}</div>
                </FormItem>
                <FormItem label="订单类型：" style="width:30%">
                  <div>{{ formData.orderTypeCn }}</div>
                </FormItem>
                <FormItem label="订单名称：" style="width:30%">
                  <div>{{ formData.orderName }}</div>
                </FormItem>
                <FormItem label="订单应收总金额：" style="width:30%">
                  <div>{{ formData.orderAmount ? `${formData.orderAmount / 100}元` : '' }}</div>
                </FormItem>
                <FormItem label="订单状态：" style="width:30%">
                  <Tag v-if="formData.orderStatus==='WP'" color="warning">{{ formData.orderStatusCN }}</Tag>
                  <Tag v-else-if="formData.orderStatus==='HC'" color="error">{{ formData.orderStatusCN }}</Tag>
                  <Tag v-else-if="formData.orderStatus==='AP'" color="success">{{ formData.orderStatusCN }}</Tag>
                  <Tag v-else color="default">{{ formData.orderStatusCN }}</Tag>

                </FormItem>
                <FormItem label="下单场景：" style="width:30%">
                  <div>{{ formData.orderScene }}</div>
                </FormItem>
                <FormItem label="支付状态：" style="width:30%">
                  <Tag v-if="formData.payStatus==='AP'" color="success">{{ formData.payStatusCN }}</Tag>
                  <Tag v-else-if="formData.payStatus==='UP'" color="warning">{{ formData.payStatusCN }}</Tag>
                  <Tag v-else color="default">{{ formData.payStatusCN }}</Tag>
                  <div></div>
                </FormItem>
                <FormItem label="订单支付总金额：" style="width:30%">
                  <div>{{ formData.payAmount ? `${formData.payAmount / 100}元` : '' }}</div>
                </FormItem>
                <FormItem label="请求ip：" style="width:30%">
                  <div>{{ formData.ip }}</div>
                </FormItem>
                <!-- <FormItem label="结算信息：" style="width:30%">
                    <div>{{ formData.settlementInfo }}</div>
                </FormItem> -->
                <FormItem label="支付渠道：" style="width:30%">
                  <div>{{ formData.payChannelCn }}</div>
                </FormItem>

                <FormItem label="支付方式：" style="width:30%">
                  <div>{{ formData.payWayCn }}</div>
                </FormItem>

                <FormItem label="支付场景：" style="width:30%">
                  <div>{{ formData.payScene }}</div>
                </FormItem>
                <!-- <FormItem label="交易信息：" style="width:30%">
                    <div>{{ formData.tradeInfo }}</div>
                </FormItem> -->

                <FormItem label="订单标记：" style="width:30%">
                  <div>{{ formData.settlementTags }}</div>
                </FormItem>

                <FormItem label="描述：" style="width:30%">
                  <div>{{ formData.description }}</div>
                </FormItem>

                <FormItem label="备注：" style="width:30%">
                  <div>{{ formData.remark }}</div>
                </FormItem>

                <FormItem label="是否测试订单：" style="width:30%">
                  <div>{{ formData.isTest ? '是' : '否' }}</div>
                </FormItem>
                <FormItem label="子订单个数：" style="width:30%">
                  <div>{{ formData.subOrderCnt }}</div>
                </FormItem>
                <FormItem label="退款次数：" style="width:30%">
                  <div>{{ formData.refundTimes }}</div>
                </FormItem>
                <FormItem label="Appid：" style="width:30%">
                  <div>{{ formData.appId }}</div>
                </FormItem>

                <FormItem label="订单下单时间：" style="width:30%">
                  <div>{{ formData.createdDt }}</div>
                </FormItem>

                <FormItem label="支付订单创建时间：" style="width:30%">
                  <div>{{ formData.createdDt }}</div>
                </FormItem>

                <FormItem label="支付订单交易时间：" style="width:30%">
                  <div>{{ formData.payTime }}</div>
                </FormItem>

                <FormItem label="支付订单过期时间：" style="width:30%">
                  <div>{{ formData.payExpiryTime }}</div>
                </FormItem>
                <FormItem label="使用优惠卷数量：" style="width:30%">
                  <div>{{ formData.couponNum }}</div>
                </FormItem>
                <FormItem label="优惠总金额：" style="width:30%">
                  <div>{{ formData.discount >= 0 ? `${formData.discount / 100}元` : '' }}</div>
                </FormItem>
                <FormItem label="用户手机号：" style="width:30%">
                  <div>{{ formData.mobile }}</div>
                </FormItem>
                <FormItem label="用户ID：" style="width:30%">
                  <div>{{ formData.uid }}</div>
                </FormItem>
                <FormItem label="是否使用优惠卷：" style="width:30%">
                  <div>{{ formData.isCoupon ? '是':'否' }}</div>
                </FormItem>

                <FormItem label="会员优惠" style="width:30%">
                  <div>{{ vipInfo!==null && vipInfo!={}?vipInfo.vipTotalAmount:0}}</div>
                </FormItem>
              </Card>
<!--              <h3 class="title">订单信息</h3>-->

                <!-- <FormItem label="渠道优惠信息：" style="width:30%"> -->
                    <!-- <div>{{ formData.uid }}</div> -->
                <!-- </FormItem> -->

              <Card :bordered="true">
                <p slot="title">子订单信息</p>
                <div v-for="(item, index) in formChilderData" :key="index">
                  <FormItem label="子订单号：" style="width:30%">
                      <div class="orderList" @click="handleChilderDetele(item.subOrderId)">{{ item.subOrderId }}</div>
                  </FormItem>
                  <FormItem label="商品名称：" style="width:30%">
                      <div>{{ item.productName }}</div>
                  </FormItem>
                  <FormItem label="商品编码：" style="width:30%">
                      <div>{{ item.productCode }}</div>
                  </FormItem>
                  <FormItem label="应收金额：" style="width:30%">
                      <div>{{ item.subOrderAmount >= 0 ? `${item.subOrderAmount / 100}元` : '' }}</div>
                  </FormItem>
                  <FormItem label="实付金额：" style="width:30%">
                      <div>{{ item.payAmount >= 0 ? `${item.payAmount / 100}元` : '' }}</div>
                  </FormItem>
                  <FormItem label="商品数量：" style="width:30%">
                      <div>{{ item.productCount }}</div>
                  </FormItem>
                  <FormItem label="优惠分摊金额：" style="width:30%">
                      <div>{{ item.discount >= 0 ? `${item.discount / 100}元` : '' }}</div>
                  </FormItem>
                  <FormItem label="子订单状态：" style="width:30%">
                    <Tag v-if="item.subOrderStatus==='SC'" color="success">{{ item.subOrderStatusCN }}</Tag>
                    <Tag v-else-if="item.subOrderStatus==='FL'" color="error">{{ item.subOrderStatusCN }}</Tag>
                    <Tag v-else color="warning">{{item.subOrderStatusCN }}</Tag>
                  </FormItem>
                  <Divider dashed/>
                </div>
              </Card>

              <Card :bordered="true">
                <p slot="title">退款信息</p>
                <div v-for="(item, index) in formRefundsData" :key="index + item.refundId">
                  <FormItem label="退款订单号：" style="width:30%">
                      <div class="orderList" @click="bandleRrfunds(item.refundId)">{{ item.refundId }}</div>
                  </FormItem>
                  <FormItem label="渠道支付订单号：" style="width:30%">
                      <div>{{ item.payFlowId }}</div>
                  </FormItem>
                  <FormItem label="渠道退款订单号：" style="width:30%">
                      <div>{{ item.flowId }}</div>
                  </FormItem>
                  <FormItem label="申请退款金额：" style="width:30%">
                      <div>{{ item.refundApplyAmount >= 0 ? `${item.refundApplyAmount / 100}元` : '' }}</div>
                  </FormItem>
                  <FormItem label="实际退款金额：" style="width:30%">
                    <div style="color: green" v-if="item.refundStatus && item.refundStatus==='SC'">
                      {{ item.refundAmount >= 0 ? `${item.refundAmount / 100}元` : '' }}
                    </div>
                    <div v-else>0 元</div>
                  </FormItem>
                  <FormItem label="退款创建时间：" style="width:30%">
                      <div>{{ item.createdDt }}</div>
                  </FormItem>
                  <FormItem label="交易时间：" style="width:30%">
                      <div>{{ item.refundTime }}</div>
                  </FormItem>
                  <FormItem label="退款状态：" style="width:30%">
                    <Tag v-if="item.refundStatus && item.refundStatus==='SC'" color="success">退款成功</Tag>
                    <Tag v-else-if="item.refundStatus && item.refundStatus==='FL'" color="error">退款失败</Tag>
                    <Tag v-else-if="item.refundStatus && item.refundStatus==='IG'" color="warning">退款中</Tag>
                    <Tag v-else color="default">无退款</Tag>
                  </FormItem>
                </div>
              </Card>

              <Card :bordered="true">
                <p slot="title">优惠劵信息</p>
                <div v-for="(item, index) in formCouponsDtat" :key="index + item" >
                  <FormItem label="是否有优惠劵：" style="width:30%">
                      <div>{{ item.isCoupon ? '是':'否' }}</div>
                  </FormItem>
                  <FormItem label="优惠总金额：" style="width:30%">
                      <div>{{ item.discount >= 0 ? `${item.discount / 100}元` : '' }}</div>
                  </FormItem>
                  <FormItem label="优惠劵码：" style="width:30%">
                      <div>{{ item.couponCode }}</div>
                  </FormItem>
                  <FormItem label="优惠券类型：" style="width:30%">
                      <div>{{ item.couponTypeCn }}</div>
                  </FormItem>
                  <FormItem label="优惠券名称：" style="width:30%">
                      <div>{{ item.couponName }}</div>
                  </FormItem>
                  <FormItem label="主订单下单标记：" style="width:30%">
                      <div>{{ item.couponTags }}</div>
                  </FormItem>
                  <FormItem label="优惠来源：" style="width:30%">
                      <div>{{ item.discountSourceCn }}</div>
                  </FormItem>
                  <!-- <FormItem label="优惠券信息：" style="width:30%">
                      <div>{{ item.rawInfo }}</div>
                  </FormItem> -->
                  <FormItem label="计平优惠劵码：" style="width:30%">
                      <div>{{ item.midasCouponCode }}</div>
                  </FormItem>
                  <FormItem label="计平优惠劵批次号：" style="width:30%">
                      <div>{{ item.midasBatch }}</div>
                  </FormItem>
                </div>
              </Card>

              <Card :bordered="true">
                <p slot="title">会员信息</p>
                <div v-if="vipInfo!==null && vipInfo!=={}">
                  <FormItem label="折扣：" style="width:30%">
                      <div>{{ vipInfo.discount >= 0 ? `${vipInfo.discount / 100}` : 0}}</div>
                  </FormItem>
                  <FormItem label="折扣金额：" style="width:30%">
                      <div>{{ vipInfo.discountAmount >= 0 ? `${vipInfo.discountAmount / 100}` : 0}}</div>
                  </FormItem>
                  <FormItem label="云币：" style="width:30%">
                      <div>{{ vipInfo.useBeam >= 0 ? `${vipInfo.useBeam / 100}` : 0}}</div>
                  </FormItem>
                  <FormItem label="云币抵扣金额：" style="width:30%">
                      <div>{{ vipInfo.useBeamAmount >= 0 ? `${vipInfo.useBeamAmount / 100}` : 0}}</div>
                  </FormItem>
                  <FormItem label="会员等级：" style="width:30%">
                      <div>{{ vipInfo.vipLevel }}</div>
                  </FormItem>

                </div>
                <div v-else>
                <FormItem label="是否有会员优惠：" style="width:30%">
                      <div>无</div>
                  </FormItem>
                </div>
              </Card>
            </Form>
            <Button type="primary" @click="goBack">返回</Button>
        </Loading>
    </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../module/blanketModule";
import {InputNumber,Input,Button,Select,Form,FormItem,Message,Option} from "view-design";
import Loading from "@/components/Loading";
//import RemoteSelect from "@/components/RemoteSelect";
//import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
//import ItemsListTable from '../../taxpayerItems/ItemsListTable';
export default {
    components: {
        InputNumber,
        Loading,
        Input,
        Button,
        Form,
        FormItem,
        Message,
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        Select,
        Option,
        Authc
    },
    props: ["id"],
    beforeMount: async function() {
        // let id = this.$route.query.id;
        // let response = await this.$store.dispatch(`${namespace}/getDetail`, id);
        // console.log(response);
        // if (response.errorCode === 0) {
        //   this.formData = response.data.orderDetailVo
        //   this.formChilderData = response.data.subOrders || [{item: '4'}]
        //   this.formRefundsData = response.data.refundOrdersDetails || {item: '4'}
        //   this.formCouponsDtat = response.data.coupons
        // //   if (!response.data.subOrders || !response.data.subOrders.length) {
        // //       this.formChilderData = [{subOrderId: ''}]
        // //   }
        // //   if (!response.data.refundOrdersDetails || !response.data.refundOrdersDetails.length) {
        // //       this.formRefundsData = [{flowId: ''}]
        // //   }
        // //   if (!response.data.coupons || !response.data.coupons.length) {
        // //       this.formCouponsDtat = [{transactionId: ''}]
        // //   }
        // }
    },
    data: function() {
        let vm = this;
        return {
            taxpayerId: this.$route.query.id,
            formRef: Uuid.v1(),
            formData: {}, // 订单信息
            formChilderData: [],  // 子订单信息
            formRefundsData: {}, // 退款信息
            formCouponsDtat: [], // 优惠劵
            vipInfo: {}, // 会员信息
            columns: [],
            disabled: false
        };
    },
    created() {
        this.getList();
      console.log('getList执行完成，formData：',this.formData )
    },
    methods: {
        async getList () {
            try {
                let id = this.$route.query.id
                let res =  await this.$store.dispatch(`${namespace}/getDetail`, id);
                console.log('getList...',res)
                if (res.ret === 0) {
                    this.formData = res.data.orderDetailVO;
                    if (res.data.subOrders && res.data.subOrders.length) {
                        this.formChilderData = res.data.subOrders;
                    } else {
                        this.formChilderData = [{}]
                    }
                    if (res.data.refunds && res.data.refunds.length) {
                        this.formRefundsData = res.data.refunds;
                    } else {
                        this.formRefundsData = [{}]
                    }
                    if (res.data.coupons && res.data.coupons.length) {
                        this.formCouponsDtat = res.data.coupons;
                    } else {
                        this.formCouponsDtat = [{}];
                    }
                    if (res.data.vipInfo) {
                        this.vipInfo = res.data.vipInfo;
                    } else {
                        this.vipInfo = {};
                    }

                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }

        },
      bandleRrfunds (id) {
        this.$router.push({path: 'refundOrderDetailForm', query: {
          id: id
        }})
      },
      bandleOrderList (id) {
        this.$router.push({path: 'BlanketOrderDetailForm', query: {
          id: id
        }})
      },
      handleChilderDetele (id) {
        this.$router.push({path: 'ChildOrderDetailForm', query: {
          id: id
        }})
      },
      goBack () {
        this.$router.go(-1);
      }
    },
    computed: {
        loading: function() {
            let result = this.$store.state[namespace].loading;
            return result;
        }
    }
};
</script>

<style>
</style>
 <style lang="less" scoped>
 .orderDetele {
  .title{
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .orderList {
    color: blue;
    cursor: pointer;
  }
  .childerList{
    border-top: 1px solid #999;
    margin-top: 10px;
    word-break: break-all;
  }
 }
 </style>
